<#import "../layout/common.html" as com>
<#assign desc='Decode from Base64 or Encode to Base64 with Bum online tool.'/>
<#assign keywords='base64, decode, encode, online, tool'/>
<@com.page title="Base64 Decoder and Encoder online tool" pageId="pageDevBase64" data={'css':'dev/dev', 'js':'dev/dev', 'ver':'a00', 'desc':desc, 'keywords':keywords}>

<div class="wrap-space">
	<div class="panel panel-default head-tab">
		<div class="panel-heading">
			<ul class="nav nav-tabs" id="djHomeTabs">
				<li><a href="#base64-info" data-toggle="tab">Base64</a></li>
				<li class="active"><a href="#base64-decode" data-toggle="tab">Decode</a></li>
				<li><a href="#base64-encode" data-toggle="tab">Encode</a></li>
			</ul>
		</div>
		<div class="tab-content">
			
			<div class="tab-pane active" id="base64-decode">
				<div class="tab-heading">
					<div class="title">Decode from Base64 format</div>
				</div>
				<form class="dev-form" role="form" method="get" action="#">
					<div class="form-group">
						<textarea class="form-control" name="source" rows="4" placeholder="Type or paste here..."></textarea>
					</div>
					<div class="form-group row">
						<div class="col-xs-6">
							<input type="submit" class="btn btn-info btn-block" value="< Decode >"/>
							<input type="hidden" class="act" value="base64Decode"/>
						</div>
						<div class="col-xs-6">
							<select name="charset" class="form-control" title="Select input charset"><option value="UTF-8">UTF-8</option><option value="ASCII">ASCII</option><option value="CP1256">CP1256</option><option value="ISO-8859-1">ISO-8859-1</option><option value="ISO-8859-2">ISO-8859-2</option><option value="ISO-8859-6">ISO-8859-6</option><option value="ISO-8859-15">ISO-8859-15</option><option value="Windows-1252">Windows-1252</option></select>
						</div>
					</div>
					<div class="form-group">
						<textarea class="form-control decode-output" rows="4" placeholder="Result goes here..." ></textarea>
					</div>
				</form>
			</div>
			
			<div class="tab-pane" id="base64-encode">
				<div class="tab-heading">
					<div class="title">Encode to Base64 format</div>
				</div>
				<form class="dev-form" role="form" method="get" action="#">
					<div class="form-group">
						<textarea class="form-control" name="source" rows="4" placeholder="Type or paste here..."></textarea>
					</div>
					<div class="form-group row">
						<div class="col-xs-6">
							<input type="submit" id="encodeButton" class="btn btn-success btn-block" value="> Encode <"/>
							<input type="hidden" class="act" value="base64Encode"/>
						</div>
						<div class="col-xs-6">
							<select name="charset" class="form-control" title="Select output charset"><option value="UTF-8">UTF-8</option><option value="ASCII">ASCII</option><option value="CP1256">CP1256</option><option value="ISO-8859-1">ISO-8859-1</option><option value="ISO-8859-2">ISO-8859-2</option><option value="ISO-8859-6">ISO-8859-6</option><option value="ISO-8859-15">ISO-8859-15</option><option value="Windows-1252">Windows-1252</option></select>
						</div>
					</div>
					<div class="form-group">
						<textarea class="form-control encode-output" rows="4" placeholder="Result goes here..." ></textarea>
					</div>
				</form>
			</div>
			
			<div class="tab-pane" id="base64-info">
				<div class="tab-heading">
					<div class="title">Base64</div>
				</div>
				<div class="code-about">
					Base64 is a generic term for a number of similar encoding schemes that encode binary data by treating it numerically and translating it into a base 64 representation. The Base64 term originates from a specific MIME content transfer encoding.
					<br/>
					<br/>Base64 encoding schemes are commonly used when there is a need to encode binary data that needs be stored and transferred over media that are designed to deal with textual data. This is to ensure that the data remains intact without modification during transport. Base64 is used commonly in a number of applications including email via MIME, and storing complex data in XML.
					<br/>
					<br/><b>Design</b>
					<br/>The particular choice of characters to make up the 64 characters required for base varies between implementations. The general rule is to choose a set of 64 characters that is both part of a subset common to most encodings, and also printable. This combination leaves the data unlikely to be modified in transit through systems, such as email, which were traditionally not 8-bit clean. For example, MIME's Base64 implementation uses A-Z, a-z, and 0-9 for the first 62 values. Other variations, usually derived from Base64, share this property but differ in the symbols chosen for the last two values; an example is UTF-7.
					<br/>
					<br/><b>Example</b>
					<br/>A quote snippet from Thomas Hobbes's Leviathan:
					<br/><br/>
					<div class="well well-sm">Man is distinguished, not only by his reason, but ...</div>
					represented as an ASCII byte sequence is encoded in MIME's Base64 scheme as follows:
					<br/><br/>
					<div class="well well-sm break-word">TWFuIGlzIGRpc3Rpbmd1aXNoZWQsIG5vdCBvbmx5IGJ5IGhpcyByZWFzb24sIGJ1dCAuLi4=</div>
					In the above quote the encoded value of <i>Man</i> is <i>TWFu</i>. Encoded in ASCII, <i>M</i>, <i>a</i>, <i>n</i> are stored as the bytes 77, 97, 110, which are 01001101, 01100001, 01101110 in base 2. These three bytes are joined together in a 24 bit buffer producing 010011010110000101101110. Packs of 6 bits (6 bits have a maximum of 64 different binary values) are converted into 4 numbers (24 = 4 * 6 bits) which are then converted to their corresponding values in Base64.
					<br/><br/>
					<div class="table-responsive">
					<table class="table table-condensed">
						<tbody>
							<tr>
								<th>Text content</th>
								<td colspan="8">M</td>
								<td colspan="8">a</td>
								<td colspan="8">n</td>
							</tr>
							<tr>
								<th>ASCII</th>
								<td colspan="8" align="center">77</td>
								<td colspan="8" align="center">97</td>
								<td colspan="8" align="center">110</td>
							</tr>
							<tr>
								<th>Bit pattern</th>
								<td>0</td>
								<td>1</td>
								<td>0</td>
								<td>0</td>
								<td>1</td>
								<td>1</td>
								<td>0</td>
								<td>1</td>
								<td>0</td>
								<td>1</td>
								<td>1</td>
								<td>0</td>
								<td>0</td>
								<td>0</td>
								<td>0</td>
								<td>1</td>
								<td>0</td>
								<td>1</td>
								<td>1</td>
								<td>0</td>
								<td>1</td>
								<td>1</td>
								<td>1</td>
								<td>0</td>
							</tr>
							<tr>
								<th>Index</th>
								<td colspan="6">19</td>
								<td colspan="6">22</td>
								<td colspan="6">5</td>
								<td colspan="6">46</td>
							</tr>
							<tr>
								<th>Base64-encoded</th>
								<td colspan="6">T</td>
								<td colspan="6">W</td>
								<td colspan="6">F</td>
								<td colspan="6">u</td>
							</tr>
						</tbody>
					</table>
					</div>
					As this example illustrates, Base64 encoding converts 3 uncoded bytes (in this case, ASCII characters) into 4 encoded ASCII characters.
					<br/>
					<br/>Source: <a href="http://en.wikipedia.org/wiki/Base64" target="_blank" title="Wikipedia">Wikipedia</a>
				</div>
			</div>
		</div>
	</div>
	
	<#include "../home/bum/box-dev.html"/>
</div>

</@com.page>